<template>
  <div class="seckillbox">
      <div class="seckill">
        <div class="countdowm">
          <h2>京东秒杀</h2>
          <div class="countdown-sec">
              <strong>12:00</strong>
                点场 距结束
          </div>
          <div class="time">
              <span id="hours">{{hour}}</span>
              <span id="minutes">{{minute}}</span>
              <span id="second">{{second}}</span>
          </div>
        </div>
        <div class="slidelist">
          <div class="swiper-container" id="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(list,index) in slideLists" :key="index">
                <ul>
                  <li v-for="onepage in list" :key="onepage.id">
                    <a href="">
                      <div class="imgBox">
                        <img :src="onepage.img" alt="">
                      </div>
                      <span>{{onepage.content}}</span>
                      <h2>
                        {{onepage.price}}
                      </h2>
                  </a>
                  </li>
                </ul>
            </div>
          </div>
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
      </div>
      </div>
      <div class="skillbrand">
        <div class="imgBox">
          <img src="../../../assets/images/pbdn.jpg">
        </div>
        <span><a href="">平板电脑秒杀专场</a></span>
        <span><a href="">秒杀直降600元</a></span>
        <div class="button">
          <a >品类秒杀></a>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'HomeSeckill',
  data: function () {
    return {
      hour: '',
      minute: '',
      second: '',
      interval: '',
      countdownTime: 120,
      slideLists: {
        list1: [
          {id: 5, price: '￥132.00', content: '象印（ZO JIRUSHI）电饭煲家用电饭锅厚内胆国内标准3L容量NS-TSH10C（不锈钢棕色 3-5人份）', img: require('../../../assets/images/nrg.jpg')},
          {id: 6, price: '￥12.86', content: '小米有品 小质即热式饮水机 家用下置式水桶双门办公室立式6档调温饮水机制冷制热 钻石白 冰热型', img: require('../../../assets/images/wxr.jpg')},
          {id: 7, price: '￥14.86', content: '【骑行养生护膝】盖护套发热老寒腿男女士漆关节疼痛防寒保暖老年人护腿 随机款式一对装', img: require('../../../assets/images/nf.jpg')},
          {id: 8, price: '￥12.06', content: '中意礼暖手宝充电暖宝宝电暖热水袋教师节情人节礼物生日礼物女生送女友闺蜜女朋友老婆结婚纪念日礼物伴手礼 太空仓鼠暖手宝', img: require('../../../assets/images/cj.jpg')}],
        lis2: [
          {id: 1, price: '￥12.86', content: 'Redmi K40 游戏增强版 天玑1200 67W闪充 120Hz高刷柔性直屏 12GB+256GB 银翼 电竞智能5G手机 小米 红米', img: require('../../../assets/images/nrg.jpg')},
          {id: 2, price: '￥162.80', content: '乐高(LEGO)积木 机械系列 42096 保时捷911RSR 10岁+ 儿童玩具 赛车跑车超跑模型 男孩女孩成人生日礼物', img: require('../../../assets/images/wxr.jpg')},
          {id: 3, price: '￥12.56', content: '清风 (APP) 卷纸 原木纯品 金装 有芯卷纸 4层加厚200克 卫生纸*27卷 (母婴可用 可冲水 新老包装随机发货）', img: require('../../../assets/images/nf.jpg')},
          {id: 4, price: '￥124.75', content: '鹰牌瓷砖 现代简约防滑耐磨地砖墙砖全抛釉 卢卡灰【单片价，2片/箱】 1200x600mm', img: require('../../../assets/images/cj.jpg')}]
      }
    }
  },
  mounted () {
    /* eslint-disable no-new */
    this.setTimer()
    this.setTimeData(this.countdownTime * 60 * 1000)
    new Swiper('#swiper', {
      loop: true
      // 如果需要分页器
      // 如果需要前进后退按钮
    })
  },
  methods: {
    setTimeData (cm) {
      console.log(cm)
      this.hour = Math.floor((cm / 1000 / 60 / 60) % 24)
      this.hour = this.hour.toString().length === 1 ? '0' + this.hour : this.hour
      this.minute = Math.floor((cm / 1000 / 60) % 60)
      this.minute = this.minute.toString().length === 1 ? '0' + this.minute : this.minute
      this.second = Math.floor((cm / 1000) % 60)
      this.second = this.second.toString().length === 1 ? '0' + this.second : this.second
    },
    setTimer () {
      let _this = this
      this.interval = setInterval(function () {
        _this.payCountdown(_this.countdownTime * 60 * 1000)
        clearInterval(_this.interval)
      }, 1000)
    },
    payCountdown (cm) {
      if (cm > 0) {
        this.hour = Math.floor((cm / 1000 / 60 / 60) % 24)
        this.hour = this.hour.toString().length === 1 ? '0' + this.hour : this.hour
        this.minute = Math.floor((cm / 1000 / 60) % 60)
        this.minute = this.minute.toString().length === 1 ? '0' + this.minute : this.minute
        this.second = Math.floor((cm / 1000) % 60)
        this.second = this.second.toString().length === 1 ? '0' + this.second : this.second
      }
      let _msThis = this
      setTimeout(function () {
        cm -= 1000
        _msThis.payCountdown(cm)
      }, 1000)
    }
  }
}
</script>

<style lang="stylus" scoped>
.seckillbox
  position relative
  background #f4f4f4
  height 260px
  .seckill
    position relative
    top 0
    right 0
    left -20px
    height 240px
    width 1180px
    margin 0 auto
    background #fff
    .countdowm
      position relative
      float left
      height 100%
      width 190px
      background-color #e83632
      background-image:url(../../../assets/images/ms.png)
      background-size:contain
      background-position 50%
      background-repeat no-repeat
      overflow hidden
      h2
        margin-top 40px
        text-align center
        font-size 26px
        color #fff
        font-weight 700
      .countdown-sec
        margin-top 90px
        text-align center
        font-size 16px
        color #fff
        strong
          font-size 18px
          font-weight 600
      .time
        width 100%
        span
          position relative
          display inline-block
          float left
          margin-top 10px
          margin-left 25px
          width 30px
          height 30px
          color #fff
          background #2F3430
          font-size 18px
          font-weight 700
          text-align center
          line-height 30px
        span:first-child:after
          content: ":";
          display: block;
          position: absolute;
          right: -20px;
          font-weight: bolder;
          font-size: 16px;
          width: 20px;
          height: 100%;
          top: 0;
        span:nth-child(2):after
          content: ":";
          display: block;
          position: absolute;
          right: -20px;
          font-weight: bolder;
          font-size: 16px;
          width: 20px;
          height: 100%;
          top: 0;
    .slidelist
      position relative
      float left
      width 800px
      ul
        position relative
        display flex
        align-items center
        li
          width 200px
          height 240px
          overflow hidden
          a
            color #000
            text-align center
            .imgBox
              width 140px
              height 140px
              margin-top 30px
              margin-left auto
              margin-right auto
              overflow hidden
              img
                width 100%
              img:hover
                opacity 0.8
            span
              padding 0 26px
              margin-top 10px
              font-size 12px
              display block
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
            span:hover
              color #E3362D
            h2
              color #E3362D
              margin-top 10px
    .skillbrand
      position relative
      float left
      width 160px
      height 240px
      padding 10px
      .imgBox
        margin-top 20px
        margin-left auto
        margin-right auto
        height 120px
        width  120px
        img
          width 100%
      span
        display block
        text-align center
        a
          color #000
      span:nth-of-type(2)
        margin-top 4px
        font-weight 700
      .button
        margin 0 auto
        display block
        justify-content center
        margin-top 10px
        width 72px
        height 26px
        border-radius 14px
        line-height 26px
        text-align center
        border 1px solid #c81623
        cursor pointer
        overflow hidden
        a
          color #C81623
          font-size 12px
          font-weight 700
      .button:hover
          background #C81623
      .button:hover a
          color #fff
</style>
